<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <title>申请会议室</title>
    <link rel="stylesheet" href="../../front/css/common.css">
    <script type="text/javascript" src="../../front/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../front/js/common.js"></script>
    <link href='../../front/css/fullcalendar.min.css' rel='stylesheet'/>
    <link href='../../front/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <script src='../../front/js/moment.min.js'></script>
    <script src='../../front/js/fullcalendar.js'></script>
    <script>

        $(document).ready(function() {

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next',
                    center: 'title',
                    right: ''
                },
                defaultDate: new Date(),
                navLinks: true, // can click day/week names to navigate views
                businessHours: true, // display business hours
                editable: true,
                events: [

                    // areas where "Meeting" must be dropped


                    // red areas where no events can be dropped
                    {
                        start: '2019-03-24',
                        overlap: false,
                        rendering: 'background',
                        color: '#ff9f89'
                    },
                    {
                        start: '2019-03-28',
                        overlap: false,
                        rendering: 'background',
                        color: '#ff9f89'
                    },
                    {
                        start: '2019-03-08',
                        overlap: false,
                        rendering: 'background',
                        color: '#ff9f89'
                    },
                    {
                        start: '2019-01-06',
                        overlap: false,
                        rendering: 'background',
                        color: '#ff9f89'
                    }
                ],
                dayClick: function(date, allDay, jsEvent, view) {
                    if (allDay) {
                        alert('Clicked on the entire 1day: ' + date);
                    }else{
                        alert('Clicked on the 2slot: ' + date);
                    }
                    window.location.href='toSelectmeet.action';
                    //alert('3Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                    // alert('4Current view: ' + view.name);
                    // change the day's background color just for fun
                    $(this).css('background-color', 'red');
                    //$(this).view.name="全天";
                    //allDayText
                },
            });

        });

    </script>
    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
        .fc-bgevent{
            position: relative;
        }
        .fc-bgevent:after{
            content: "预约已满";
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -23px;
            margin-top: -5px;
            font-size: 0.8em;
        }
        .fc-nonbusiness.fc-bgevent:after{
            content: "";
        }
        .fc-scroller{
            min-height: 336px !important;
        }
    </style>
</head>
<body>
<div class="ly_header header2" style="z-index: 6;position: fixed;width: 100%;left: 0;top: 0;">申请会议室
    <div class="ly_left goback"><img src="../../front/image/gobackbai.png" alt=""></div>
</div>
<div class="choosework2">
    <div class="meettypelist">
        <div>
            <div class="box5 left text_right">
                <img src="../../front/newimg/appmeetok.png" style="height: 27px" alt="">
            </div>
            <div class="box4 left">
                <div class="returntime"></div>
            </div>
            <div class="left text_left">
                <img src="../../front/newimg/appmeetok.png" style="height: 27px" alt="">
            </div>
            <div class="box4 left">
                <div class="returntime" style=""></div>
            </div>
            <div class="box5 left text_left">
                <img src="../../front/newimg/appmeetok.png" style="height: 27px" alt="">
            </div>
            <div style="clear: both"></div>
        </div>
        <div>
            <div class="box3 left text_center hdbmz" style="font-size: 0.8em;padding-right: 8px;">选择会议中心</div>
            <div class="box3 left text_center hdbmz" style="font-size: 0.8em;padding-right: 8px;">选择会议室</div>
            <div class="box3 left text_center hdbmz" style="font-size: 0.8em;">选择会议时间</div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div class="meettypelist" style="background: #eee;padding: 15px 0">
        <div class="dw" style="background: white">
            <div class="dateinput">会议中心名称：会议中心名称</div>
        </div>
    </div>
    <div class="releaselist">
        <div id='calendar'></div>
    </div>
</div>
</body>
</html>